<template>
  <div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"
    />
    <el-container>
      <el-main style="padding-top: 0px"
        ><div
          style="margin-top: 20px; width: 1000px; margin-left: 200px"
          class="ui top attached segment"
        >
          <div class="ui middle aligned two column grid">
            <div class="column">
              <h3 style="float: left" class="ui teal header">博客</h3>
            </div>
            <div class="right aligned column">
              共<font
                id="totalCount"
                class="ui orange header m-inline-block m-text-thin"
                color="red"
                >{{ total }}</font
              >篇
              <!--               <font
                id="totalPage"
                class="ui orange header m-inline-block m-text-thin"
                color="red"
                >{{ pageNum }}</font
              >页 -->
            </div>
          </div>
        </div>
        <BlogDetail @total="getTotal" />
      </el-main>
      <el-aside width="400px" style="margin-right: 200px"
        ><!--右边的top-->
        <div class="five wide column">
          <!--分类-->
          <div style="margin-top: 20px" class="ui segments">
            <div class="ui secondary segment">
              <div class="ui two column grid">
                <div class="column">
                  <font style="float: left"
                    ><i class="calendar icon"></i>最新博客</font
                  >
                </div>
                <!--                 <div class="right aligned column">
                  <a href="categoryBlog.html?categoryName=" target="_self"
                    >more <i class="angle double right icon"></i
                  ></a>
                </div> -->
              </div>
            </div>
            <div class="ui teal segment" >
              <div id="categoryList" class="ui fluid vertical menu" v-for="blog in newBlogArray" :key="blog.id">
                <a :href="'#/blogComment?id=' + blog.id" class="item">
                  {{blog.title}}
                  <!-- <div class="ui teal basic left pointing label">13</div> -->
                </a>
              </div>
            </div>
          </div>
        </div>
        <!--标签-->
        <div style="margin-top: 100px" class="ui segments m-margin-top-large">
          <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <font style="float: left"
                  ><i class="eye icon"></i>热门博客</font
                >
              </div>
              <!--               <div class="right aligned column">
                <a href="tagBlog.html?tagName=" target="_self"
                  >more <i class="angle double right icon"></i
                ></a>
              </div> -->
            </div>
          </div>
          <div class="ui teal segment">
            <div id="categoryList" class="ui fluid vertical menu" v-for="blog in hotBlogArray" :key="blog.id">
              <a :href="'#/blogComment?id=' + blog.id" class="item">
                {{blog.title}}
                <!-- <div class="ui teal basic left pointing label">13</div> -->
              </a>
            </div>
          </div>
        </div></el-aside
      >
    </el-container>
  </div>
</template>

<script>
import BlogDetail from "@/views/BlogDetail.vue";

export default {
  name: "Blog",
  components: {
    BlogDetail,
  },
  data() {
    return {
      total: 0,
      newBlogArray:[],
      hotBlogArray:[]
      /*      pageNum: 1, */
    };
  },
  created() {
    /*    this.getTotal(); */
    this.getNewBlog()
    this.getHotBlog()
  },
  methods: {
    getTotal(val) {
      this.total = val;
      /*  this.pageNum = this.total % 5 == 0 ? this.total / 5 : parseInt(this.total / 5 + 1); */
    },
    getNewBlog(){
      this.$get('new').then((res)=>{
        if(res){
          this.newBlogArray = res
        }
      })
    },
    getHotBlog(){
      this.$get('hot').then((res)=>{
        if(res){
          this.hotBlogArray = res
        }
      })
    }
  },
};
</script>

<style>
</style>